Vue.component('app-list', {
    template: '#app-list',
    data() {
        return {
            usersData: [],
            test:[],
            wantEditKey: -1,
        }
    },
    methods: {
        edit(key) {
            this.wantEditKey = key;
            this.$emit('edit', [JSON.parse(JSON.stringify(this.test[key])), true])
        }
    },
    computed: {
        filterUsers(){
            let filterUser = {
                '-1': () => this.usersData,
                '0': () => this.usersData.sort((prev, next) => prev.phoneNumber - next.phoneNumber),
                '1': () => this.usersData.sort((prev, next) => next.phoneNumber - prev.phoneNumber),
                '2': () => this.usersData.filter(value => /^1[3458]/.test(value.phoneNumber)),
                '3': () => this.usersData.filter(value => value.age < 18),
            };
            return filterUser[this.index]();
        },
    },
    watch: {
        index: function (){
            this.test = this.filterUsers;
        },
        editeduser(){
            console.log(this.editeduser);
            if(this.wantEditKey !== -1) {
                this.$set(this.test, this.wantEditKey, this.editeduser);
            }
        }
    },
    mounted() {
        axios.get('http://a.com', {params: { count: 8 }})
            .then((res) => {
                this.usersData = res.data.data;
                this.test = this.filterUsers;
            })
            .catch((error) => console.log(error));
    },
    props: ['index','editeduser']
});